import { useState } from 'react';
import { Modal } from 'antd';

/** 图片列表 */
export default function AxPicture(props) {
  const { pics = [], ...rest } = props;
  const [previewImage, setPreviewImage] = useState('');
  const [previewVisible, setPreviewVisible] = useState(false);
  const handleCancel = () => setPreviewVisible(false);
  const handlePreview = async p => {
    setPreviewImage(p);
    setPreviewVisible(true);
  };
  return (
    <>
      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
        <img alt="picture" style={{ width: '100%' }} src={previewImage} />
      </Modal>
      <div
        className="ant-col ant-form-item-control-wrapper ant-col-sm-22"
        style={{ width: '100%' }}
      >
        <div className="ant-form-item-control has-error">
          <span className="ant-form-item-children">
            <span className="ant-upload-picture-card-wrapper">
              <div className="ant-upload-list ant-upload-list-picture-card">
                {pics.map((i, idx) => (
                  <div key={idx} className="ant-upload-list-picture-card-container">
                    <span>
                      <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
                        <div className="ant-upload-list-item-info">
                          <span>
                            <a
                              className="ant-upload-list-item-thumbnail"
                              href={i.url}
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              <img
                                src={i.url}
                                alt="image.png"
                                className="ant-upload-list-item-image"
                              />
                            </a>
                            <a
                              target="_blank"
                              rel="noopener noreferrer"
                              className="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
                              title="image.png"
                              href={i.url}
                            >
                              image.png
                            </a>
                          </span>
                        </div>
                        <span className="ant-upload-list-item-actions">
                          <a
                            onClick={() => handlePreview(i.url)}
                            target="_blank"
                            rel="noopener noreferrer"
                            title="预览文件"
                          >
                            <span role="img" aria-label="eye" className="anticon anticon-eye">
                              <svg
                                viewBox="64 64 896 896"
                                focusable="false"
                                className=""
                                data-icon="eye"
                                width="1em"
                                height="1em"
                                fill="currentColor"
                                aria-hidden="true"
                              >
                                <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
                              </svg>
                            </span>
                          </a>
                        </span>
                      </div>
                    </span>
                  </div>
                ))}
              </div>
            </span>
          </span>
        </div>
      </div>
    </>
  );
}
